<style>
    .x-scroller .prev,.x-scroller .next{
        cursor:pointer;
    }
</style>

<div id="switchable-<{$widgets_id}>" class="x-scroller">
    <span id="scroller-prev" class="prev disable">上一页</span>
    <span id="scroller-next" class="next">下一页</span>
    <div class="x-scroller">
        <div class="switchable-content">
          <{foreach from=$setting.pic item=data key=key}><a href="<{$data.linktarget}>">
           <{if $data.link}> 
           <a href="<{$data.linktarget}>"><img width="<{$setting.SinglePicWidth|default:100}>" height="<{$setting.SinglePicHeight|default:75}>" <{if $setting.islazyload eq 'true'}>img-lazyload<{else}>src<{/if}>="<{$data.link}>"/><{/if}></a>
            <{/foreach}>
        </div>
        <ul class="switchable-triggerBox">
            <li class="active">&bull;</li>
            <li>&bull;</li>
            <li>&bull;</li>
        </ul>
    </div>
</div>


<script>
        new Switchable('switchable-<{$widgets_id}>', {
                    effect:"<{$setting.effect|default:'scrollx'}>",
                    steps:<{$setting.steps|default:5}>,
                    viewSize: [<{$setting.switchable_width|default:680}>,<{$setting.switchable_height|default:120}>],
                    circular:<{$setting.around|default:true}>,
                    haslrbtn:<{$setting.haslrbtn|default:true}>,
                    disableCls: 'disable',
                    lazyDataType: 'img',
                    islazyload:<{$setting.islazyload|default:false}>
        });  
        
    
  



</script>
